$(function () {
    // 菜单导航栏
    $(".nav .nav-box .item-menu a").mouseenter(function () {
        $(".nav .nav-menu").show();
        $(".nav .nav-about").hide();
        $(".nav .nav-safe").hide();
    })
    // $(".nav-left").mouseleave(function () {
    //     $(".nav .nav-menu").hide();
    // })

    // 关于导航栏
    $(".nav .nav-box .item-about a").mouseenter(function () {
        $(".nav .nav-about").show();
        $(".nav .nav-menu").hide();
        $(".nav .nav-safe").hide();
    })
    // $(".nav .nav-box .item-about").mouseleave(function () {
    //     $(".nav .nav-about").hide();
    // })

    // 安心导航栏
    $(".nav .nav-box .item-safe a").mouseenter(function () {
        $(".nav .nav-safe").show();
        $(".nav .nav-menu").hide();
        $(".nav .nav-about").hide();
    })
    // $(".nav .nav-box .item-safe").mouseleave(function () {
    //     $(".nav .nav-safe").hide();
    // })

    // 导航栏
    $(".nav").mouseleave(function () {
        $(".nav .nav-menu").hide();
        $(".nav .nav-about").hide();
        $(".nav .nav-safe").hide();
    })

    //---------------------------------------------------------------------------//

    // 轮播图
    var timer = null; // 定时器变量名
    var banIndex = 0; // 轮播图片索引值
    var banSqua = 0; // 索引点索引值
    var banWid = 1515; // 轮播图片宽度
    var banLen = $(".main .banner ul li").length; // 轮播图片数量
    // 轮播图自动轮播逻辑
    function bannerPlay() {
        banIndex++;
        // 轮播图片播放结束跳回第一张图
        if (banIndex > banLen - 1) {
            banIndex = 1;
            $(".main .banner ul").css("left", 0)
        }
        $(".main .banner ul").animate({ left: -(banIndex * banWid) + "px" }, 300)
        // 索引点播放结束跳回第一个
        banSqua++;
        if (banSqua > banLen - 2) {
            banSqua = 0;
        }
        $(".main .banner ol li").eq(banSqua).addClass("active").siblings().removeClass("active");
    }

    // 计时器
    timer = setInterval(function () {
        bannerPlay();
    }, 2000)

    // 鼠标移入暂停轮播图自动播放
    $(".banner").on("mouseenter", function () {
        clearInterval(timer);
    })

    // 鼠标移出恢复轮播图自动播放
    $(".banner").on("mouseleave", function () {
        clearInterval(timer);
        timer = setInterval(function () {
            bannerPlay();
        }, 2000);
    })

    // 点击索引点切换图片
    $(".banner ol li").on("click", function () {
        var val = $(this).index();
        banIndex = val;
        banSqua = val;
        $(".main .banner ul").animate({ left: -(banIndex * banWid) + "px" }, 300);
        $(".main .banner ol li").eq(banSqua).addClass("active").siblings().removeClass("active");
    })

    // 点击箭头切换轮播图
    $(".banner .banner-arrow").on("click", "div", function () {
        // 切换上一张图片
        if ($(this).index() == 0) {
            if (timer) {
                clearInterval(timer);
            }
            banIndex--;
            if (banIndex < 0) {
                banIndex = banLen - 2;
                $(".main .banner ul").css("left", "-9090px");
            }
            $(".main .banner ul").stop().animate({ left: -(banIndex * banWid) + "px" }, 300);
            banSqua--;
            if (banSqua < 0) {
                banSqua = banLen - 2;
            }
            $(".main .banner ol li").eq(banSqua).addClass("active").siblings().removeClass("active");
        }
        // 切换下一张图片
        if ($(this).index() == 1) {
            if (timer) {
                clearInterval(timer);
            }
            banIndex++;
            if (banIndex > banLen - 1) {
                banIndex = 1;
                $(".main .banner ul").css("left", 0)
            }
            $(".main .banner ul").animate({ left: -(banIndex * banWid) + "px" }, 300);
            banSqua++;
            if (banSqua > banLen - 2) {
                banSqua = 0;
            }
            $(".main .banner ol li").eq(banSqua).addClass("active").siblings().removeClass("active");
        }
    })

    //---------------------------------------------------------------------------//

    // icon切换
    var wechat = document.querySelectorAll(".wechat");
    var alipay = document.querySelectorAll(".alipay");
    var tiktok = document.querySelectorAll(".tiktok");
    var takout = document.querySelectorAll(".takout");
    var mask_wechat = document.querySelector(".mask-wechat");
    var mask_alipay = document.querySelector(".mask-alipay");
    var mask_tiktok = document.querySelector(".mask-tiktok");
    var mask_takout = document.querySelector(".mask-takout");
    var close_icon1 = document.querySelector(".close-icon1");
    var close_icon2 = document.querySelector(".close-icon2");
    var close_icon3 = document.querySelector(".close-icon3");
    var close_icon4 = document.querySelector(".close-icon4");
    for (var i = 0; i < 3; i++) {
        $(wechat).eq(i).click(function() {
            mask_wechat.style["display"] = "block";
        })
        $(alipay).eq(i).click(function() {
            mask_alipay.style["display"] = "block";
        })
        $(tiktok).eq(i).click(function(){
            mask_tiktok.style["display"] = "block";
        })
        $(takout).eq(i).click(function(){
            mask_takout.style["display"] = "block";
        })
    }
    close_icon1.onclick = function () {
        mask_wechat.style["display"] = "none";
    }
    close_icon2.onclick = function () {
        mask_alipay.style["display"] = "none";
    }
    close_icon3.onclick = function () {
        mask_tiktok.style["display"] = "none";
    }
    close_icon4.onclick = function () {
        mask_takout.style["display"] = "none";
    }

    //---------------------------------------------------------------------------//

    // 返回顶部
    // 滚动显示
    $(document).scroll(function() {
        let height = 600;
        let scroll = document.documentElement.scrollTop || document.body.scrollTop;
        if (scroll >= height) {
            $(".back-box").fadeIn(300);
        } else {
            $(".back-box").fadeOut(300);
        }
    })

    // 返回顶部
    $(".back").click(function() {
        $("html").animate({ scrollTop: 0},500)
    })
})